<!--
  - Copyright (c) 2018-2025, chris All rights reserved.
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: ${author}
  - Date: ${time}
  - ${description}
  -->
<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container">
            <#--<el-input @keyup.enter.native="handleFilter" style="width: 250px;" class="filter-item" size="small"
                      placeholder="名称、编号、地址、联系人、联系电话"
                      v-model="listQuery.keyword">
            </el-input>
            <el-button class="filter-item" type="primary" size="small" v-waves icon="search" @click="handleFilter">搜索
            </el-button>-->
            <el-button v-if="${lowerName}_add" class="filter-item" size="small" style="margin-left: 10px;" @click="handleCreate"
                       type="primary"
                       icon="edit">添加
            </el-button>
        </div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit
                  highlight-current-row style="width: 99%" size="small">
        <#list fields as field>
            <#if field.typeName=='TIMESTAMP'>
            <el-table-column align="center" label="${field.remark!field.name}">
                <template slot-scope="scope">
                    <span>{{scope.row.${field.name} | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
                </template>
            </el-table-column>
            <#elseif field.typeName=='Boolean' || field.typeName=='BIT'>
                <el-table-column align="center" class-name="status-col" label="${field.remark!field.name}">
                    <template slot-scope="scope">
                        <span>{{scope.row.${field.name} | statusFilter}}</span>
                    </template>
                </el-table-column>
            <#else>
             <el-table-column align="center" label="${field.remark!field.name}">
                 <template slot-scope="scope">
                     <span>{{scope.row.${field.name}}}</span>
                 </template>
             </el-table-column>
            </#if>
        </#list>
            <el-table-column align="center" label="操作" width="200" v-if="${lowerName}_edit">
                <template slot-scope="scope">
                    <el-button v-if="${lowerName}_edit" size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button v-if="${lowerName}_delete" size="small" type="danger" @click="delete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="listQuery.page" :page-sizes="[10,30,50,100]" :page-size="listQuery.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <#if primaryFieldName??>
                <el-form-item v-if="dialogStatus == 'update'" label="序号" prop="${primaryFieldName}">
                    <el-input v-model="form.${primaryFieldName}" :disabled="true"></el-input>
                </el-form-item>
            </#if>
            <#list fields as field>
                <#if !primaryFieldName?? || field.name!=primaryFieldName >
                    <#if field.typeName=='Boolean' || field.typeName=='BIT'>
                <el-form-item label="${field.remark!field.name}" prop="${field.name}">
                    <el-select class="filter-item" v-model="form.${field.name}" placeholder="请选择">
                        <el-option v-for="item in statusOptions" :key="item" :label="item | statusFilter" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                    <#else>
                <el-form-item label="${field.remark!field.name}" prop="${field.name}">
                    <el-input v-model="form.${field.name}" placeholder="请输入${field.remark!field.name}"></el-input>
                </el-form-item>
                    </#if>
                </#if>
            </#list>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('form')">取消</el-button>
                <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">保存</el-button>
                <el-button v-else type="primary" @click="update('form')">更新</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {fetchList, getObj, addObj, delObj, putObj} from 'templates/ui/src/views/admin/_LOWERNAME_/index.vue${lowerName}'
    import waves from "@/directive/waves/index.js"; // 水波纹指令
    import {mapGetters} from 'vuex'

    export default {
        name: '${lowerName}',
        directives: {
            waves
        },
        data() {
            return {
                tableKey: 0,
                list: null,
                dialogStatus: "",
                dialogFormVisible: false,
                textMap: {
                    update: "编辑",
                    create: "创建"
                },
                statusOptions: [true, false, 0, 1],
                methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10
                },
                labelPosition: 'right',
                form: {
                <#list fields as field>
                    ${field.name}: undefined,
                </#list>
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: "请输入名称",
                            trigger: "blur"
                        },
                        {
                            min: 1,
                            max: 100,
                            message: "长度在 1 到 100 个字符",
                            trigger: "blur"
                        }
                    ],
                    enable: [
                        {
                            required: true,
                            message: "请选择状态",
                            trigger: "blur"
                        }
                    ]
                },
                ${lowerName}_add: false,
                ${lowerName}_edit: false,
                ${lowerName}_del: false
            }
        },
        filters: {
            statusFilter(type) {
                const statusMap = {
                    true: '是',
                    false: '否',
                    0: '否',
                    1: '是'
                }
                return statusMap[type]
            }
        },
        created() {
            this.getList()
            this.${lowerName}_add = this.permissions['${lowerName}_add']
            this.${lowerName}_edit = this.permissions['${lowerName}_edit']
            this.${lowerName}_del = this.permissions['${lowerName}_del']
        },
        computed: {
                ...mapGetters([
                    'elements',
                    'permissions'
                ])
    },
    methods: {
        getList() {
            this.listLoading = true;
            fetchList(this.listQuery).then(response => {
                this.list = response.data.data.content;
                this.total = response.data.data.totalElements;
                this.listLoading = false;
            })
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getList();
        },
        handleUpdate(row) {
            getObj(row.${primaryFieldName}).then(response => {
                this.form = response.data.data
                this.dialogFormVisible = true;
                this.dialogStatus = "update";
            })
        },
        handleCreate() {
            this.resetForm()
            this.dialogStatus = "create";
            this.dialogFormVisible = true;
        },
        update(formName) {
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    this.dialogFormVisible = false;
                    putObj(this.form).then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$notify({
                            title: "成功",
                            message: "修改成功",
                            type: "success",
                            duration: 2000
                        });
                    });
                } else {
                    return false;
                }
            })
        },
        create(formName) {
            const set = this.$refs;
            set[formName].validate(valid => {
                if (valid) {
                    addObj(this.form).then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$notify({
                            title: "成功",
                            message: "创建成功",
                            type: "success",
                            duration: 2000
                        });
                    });
                } else {
                    return false;
                }
            })
        },
        delete(row) {
            delObj(row.${primaryFieldName}).then(() => {
                this.getList();
                this.$notify({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                    duration: 2000
                });
            });
        },
        cancel(formName) {
            this.dialogFormVisible = false
            this.$refs[formName].resetFields();
        },
        resetForm() {
            this.form = {
            <#list fields as field>
                ${field.name}: undefined,
            </#list>
            }
        }
    }
    }
</script>
<style lang="scss" scoped>
</style>

